<!--  
  1. 前往订阅服务页面

-->

<template>
  <div class="page-view page-avtivation-code">
    <div class="avtivation-container">
      <div class="avtivation-title">输入您的激活码，以激活对应的功能或订阅服务</div>
      <input type="text" class="avtivation-code--input" placeholder="请输入激活码，注意区分大小写" v-model="code" />
      <div class="avtivation-submit" @click="handleClickConvert">立即兑换</div>
      <div class="avtivation-tips">
        <div class="review">兑换说明</div>
        <div class="content">
          <div>1、兑换前请完善您的用户信息，以便更好地享受翼法学院的专属权益和服务。</div>
          <div>2、根据您的激活码类型，可以激活翼法学院的会员，已经是会员的用户可以延长会员有效期限。</div>
          <div>3、根据您的激活码类型，可以激活对应的专属订阅服务，获得对应专属课程的观看权。</div>
          <div>4、激活码不记名、不挂失、不可兑换现金，只能使用一次</div>
          <div>5、成功激活后对应服务立刻生效，生效后该激活码不可再次使用。</div>
        </div>
      </div>
    </div>
    <!-- 兑换成功 -->
    <uiDialog :show="isShowSuccess" ref="successDialog" :showFooterButton="false">
      <div class="dialog-container">
        <image
          class="dialog-close"
          src="/static/images/order/deleteIcon.jpg"
          alt
          @click.stop="isShowSuccess = false"
        />
        <div class="dialog-header">兑换成功!</div>
        <div class="dialog-info" v-if="isVip==3&&type==1">恭喜，请在“我的-专属课程”中查看</div>
        <div class="dialog-info" v-if="isVip==2&&type==1">恭喜，请在“我的-VIP”中查看</div>
        <div class="dialog-info" v-if="isVip==null&&type==2">恭喜，请在“我的-我的订单”中查看</div>

        <!-- <div class="dialog-btn">
          <ui-button type="success" size="small" inline circle @click="handleClick">前往查看</ui-button>
        </div>-->
      </div>
    </uiDialog>
    <!-- 兑换失败 -->
    <uiDialog :show="isShowError">
      <div class="dialog-container error" ref="errorDialog" :showFooterButton="false">
        <img
          class="dialog-close"
          src="/static/images/order/deleteIcon.jpg"
          alt
          @click.stop="isShowError = false"
        />
        <div class="dialog-header">兑换失败!</div>
        <div class="dialog-info">抱歉，您额激活码不存在</div>
      </div>
    </uiDialog>
  </div>
</template>

<script>
import uiDialog from "@/components/base/dialog/index";
import uiButton from "@/components/base/button/index";
import { url } from "@/utils/url.js";

import {
  codeOrder,
  getSelectActivationCodeByCode,
  getDirectActivationCode
} from "api/order/order.js";
export default {
  name: "activationCodePage",
  components: { uiDialog, uiButton },
  data() {
    return {
      // 激活方式 1 : 通用激活 可以激活VIP、专属
      // 2. 激活的是课程
      type: 1,
      show3: false,
      // 兑换的订单号
      orderNo: "",
      code: "",
      isShowSuccess: false,
      isShowError: false,
      // 兑换返回页面
      redirect: "",
      exclusive: null,
      codeType: null,
      flag: null,
      isVip: null
    };
  },
  onLoad() {
    const curUrl = url();

    // 订单号
    this.orderNo = curUrl.query.id || "";
    // 返回页面
    this.redirect = curUrl.query.redirect || "";

    this.type = curUrl.query.type || 1;
  },
  watch: {
    code(newValue, oldValue) {
      if (newValue.length === 20) {
        this.code = oldValue;
        return;
      }
      let newValueReplace = newValue.replace(/[^0-9a-zA-Z]/g, "");
      if (newValueReplace.length > 16) {
        newValueReplace = `${newValueReplace} + ''`.slice(0, 16);
      }
      if (newValueReplace.length > 12) {
        this.code =
          newValue.length > oldValue.length
            ? newValue
                .replace(/[^0-9a-zA-Z]/g, "")
                .replace(/(\d{4})(\d{4})(\d{4})(\d{1,4})/, "$1-$2-$3-$4")
            : this.code.trim();
      } else if (newValueReplace.length > 8) {
        this.code =
          newValue.length > oldValue.length
            ? newValue
                .replace(/[^0-9a-zA-Z]/g, "")
                .replace(/(\d{4})(\d{4})(\d{1,4})/, "$1-$2-$3")
            : this.code.trim();
      } else {
        this.code =
          newValue.length > oldValue.length
            ? newValue
                .replace(/[^0-9a-zA-Z]/g, "")
                .replace(/(\d{4})(\d{1,4})/, "$1-$2")
            : this.code.trim();
      }
    }
  },
  mounted() {},
  methods: {
    //获取激活码信息
    getActivationCodeByCode() {
      var params = {
        code: this.code.replace(/[^0-9a-zA-Z]/g, "")
      };

      getSelectActivationCodeByCode(params).then(
        ({ respCode, respMsg, result }) => {
          if (respCode == 0) {
            this.isVip = result.codeType;
            if (result.codeType == 3) {
              this.exclusive = result.exclusive.exclusive;
              uni.showModal({
                title: "提示",
                content: `该激活码是开通${this.exclusive}专属,是否确认激活?`,
                success: res => {
                  if (res.confirm) {
                    // 自定义跳转地址
                    this.redirect = `/my/subscriber`;
                    this.DirectActivationCode();
                  }
                  // on confirm
                }
              });
            }
            if (result.codeType == 2) {
              this.exclusive = result.vipGrade.description;
              console.log(this.exclusive);
              uni.showModal({
                title: "提示",
                content: `该激活码是开通${this.exclusive},是否确认激活?`,
                success: res => {
                  if (res.confirm) {
                    // 自定义跳转地址
                    this.redirect = `/my/subscriber`;
                    this.DirectActivationCode();
                  }
                  // on confirm
                }
              });
            }
          } else {
            this.$toast.fail(respMsg);
          }
        }
      );
    },
    // 激活码直接进行税换
    DirectActivationCode() {
      var params = {
        code: this.code.replace(/[^0-9a-zA-Z]/g, "")
      };
      getDirectActivationCode(params)
        .then(({ respCode, respMsg, result }) => {
          if (respCode == 0) {
            this.$refs.successDialog.open();
            return;
          }
          this.$refs.errorDialog.open();
        })
        .catch(_ => {
          this.$refs.errorDialog.open();
        });
    },
    /**
     * 前往订阅服务页面
     */
    handleClickDingyue() {
      if (this.redirect) {
        this.$router.push({
          path: `${removeUrlParam(unescape(this.redirect))}`,
          query: {
            sid: this.$route.query.sid
          }
        });
      } else {
        // 没有设置返回的页面 那么默认进入我的订阅服务页面
      }
    },

    /**
     * 当前是 课程的激活码兑换，不需要获取课程的信息
     */
    lessonVertifyCodeActivity() {
      var params = {
        orderNo: this.orderNo,
        code: this.code.replace(/[^0-9a-zA-Z]/g, "")
      };
      var self = this;
      codeOrder(params)
        .then(({ respCode, respMsg, result }) => {
          if (respCode !== "0") {
            // 加载失败
            this.isShowError = true;
            return;
          }
          this.isShowSuccess = true;
        })
        .catch(_ => {
          this.isShowError = true;
        });
    },

    /**
     * 兑换激活码
     */
    handleClickConvert() {
      var _this = this;
      if (!this.code) {
        this.$toast.fail("请输入兑换码");
        return;
      }
      if (_this.type == 2) {
        this.lessonVertifyCodeActivity();
      }
      if (_this.type == 1) {
        this.getActivationCodeByCode();
      }
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
